<template>
	<view class="wrap">
		<!-- <view class="section-title">功能展示</view> -->
		<view class="grid-box">
			<view class="grid-item" v-for="(item, index) in appletList" :index="index" :key="index">
				<view class="grid-content" @click="openApp(index)">
					<text class="img-text">{{index + 1}}</text>
					<text class="text">{{item.applet_name}}</text>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn-item">
				<button @click="goLogin">登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref
	} from "vue"
	const mp = uni.requireNativePlugin('uniMP')
	const appletList = ref([{
		"_id": "64ad9e0221821b1c9e962b250",
		"applet_version": "1.0.0",
		"applet_name": "网页-Demo",
		"app_type": 3,
		"applet_link": "https://vue3-hellouniapp.dcloud.net.cn/pages/component/view/view",
	}, {
		"_id": "64ad9e0221821b1c9e962b251",
		"applet_version": "1.0.0",
		"applet_name": "小程序-BaseMp",
		"app_type": 1,
		"applet_url": [{
			"extname": "wgt",
			"name": "__UNI__EE92C78.wgt",
			"path": "https://www.jianjiangwang.com/__UNI__EE92C78.wgt",
			"size": 336239,
		}],
		"applet_id": "__UNI__EE92C78",
	}, {
		"_id": "64ad9e0221821b1c9e962b253",
		"applet_version": "1.0.0",
		"applet_name": "小程序-Uni组件",
		"app_type": 1,
		"applet_url": [{
			"extname": "wgt",
			"name": "__UNI__03C3F3A.wgt",
			"path": "https://www.jianjiangwang.com/__UNI__03C3F3A.wgt",
			"size": 336239,
		}],
		"applet_id": "__UNI__03C3F3A",
	}, {
		"_id": "64ad9e0221821b1c9e962b254",
		"applet_version": "1.0.0",
		"applet_name": "小程序-登录模板",
		"app_type": 1,
		"applet_url": [{
			"extname": "wgt",
			"name": "__UNI__4F37C90.wgt",
			"path": "https://www.jianjiangwang.com/__UNI__4F37C90.wgt",
			"size": 336239,
		}],
		"applet_id": "__UNI__4F37C90",
	}, {
		"_id": "64ad9e0221821b1c9e962b252",
		"applet_version": "1.0.0",
		"applet_name": "小程序-个人中心",
		"app_type": 1,
		"applet_url": [{
			"extname": "wgt",
			"name": "__UNI__87347A0.wgt",
			"path": "https://www.jianjiangwang.com/__UNI__87347A0.wgt",
			"size": 336239,
		}],
		"applet_id": "__UNI__87347A0",
	}, {
		"_id": "64ad9e0221821b1c9e962b250",
		"applet_version": "1.0.0",
		"applet_name": "APP-淘宝",
		"app_type": 2,
		"applet_link": "taobao://s.taobao.com",
	}])
	const {
		proxy
	} = getCurrentInstance()
	const openApp = (index) => {
		let applet = appletList.value
		proxy.$helper.openThirdApp(mp, applet[index])
	}

	const goLogin = () => {
		proxy.$helper.jumpPage({
			url: '/pages/login/index'
		})
	}
</script>

<style>
	.wrap {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: #f2f2f2;
	}

	.section-title {
		padding: 10px 10px 0 10px;
		font-size: 18px
	}

	.grid-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 5px;
	}

	.grid-item {
		width: calc(100vw / 2 - 5px);
		height: calc((100vw / 2 - 5px)/4*3);
		padding: 5px;
		box-sizing: border-box;
	}

	.grid-content {
		background-color: #fff;
		border-radius: 4px;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.img-text {
		width: 40px;
		height: 40px;
		border-radius: 40px;
		line-height: 40px;
		background-color: #f90;
		text-align: center;
		font-size: 20px;
		color: #fff;
	}

	.text {
		font-size: 15px;
		margin-top: 10px;
	}

	.btn-box,
	.btn-item {
		padding: 0 5px;
	}

	.btn-box button {
		background-color: #fff;
	}
</style>